<template>
  <div>
    <div class="title clearfix">
      <span class="floatLeft" style="font-size: 1.5em;font-weight: bold;">
        分类
      </span>
      <em class="floatRight">共 {{allNumber}} 篇</em>
    </div>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :router=isRouter
      background-color="#f8f8f8"
      style="border: none;">
      <el-menu-item v-for="(item , i) in items" :index="i+''" :key="i" :route="'/edit/article/'+i">
        <span slot="title">{{item.title}}</span>
        <span slot="title" class="floatRight">{{item.number}}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
    export default {
        name: 'TitleList',
        data (){
            return {
              tabPosition: 'left',
              isRouter:true,
              items:[
                {
                    title:'导航标题',
                    number:13
                },
                {
                  title:'导航标题',
                  number:13
                }
              ],
              allNumber:15
            }
        },
        methods: {
          handleOpen(key, keyPath) {
            console.log(key, keyPath);
          },
          handleClose(key, keyPath) {
            console.log(key, keyPath);
          }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title{
  line-height: 30px;
  padding: 0 10px 0 20px;
}
</style>
